<template>
  <CRow class="menmuStyle systemFooter">
    <CCard class="leftCard">
      <div class="menuBtn" style>
        <CButton
          v-c-tooltip="'添加根节点'"
          title="添加根节点"
          variant="outline"
          color="rgb(2,40,88)"
          @click="addTreeNode"
          data-permission="Btn_Module_AddR"
        >
          <img
            class="featuresstyle addTongji"
            src="@/assets/icons/增加同级.svg"
            alt
          />
        </CButton>
        <CButton
          v-c-tooltip="'编辑根节点'"
          title="编辑根节点"
          variant="outline"
          @click="updateTreeNode"
          data-permission="Btn_Module_UpR"
        >
          <img class="featuresstyle" src="@/assets/icons/edit.svg" alt />
        </CButton>
        <CButton
          v-c-tooltip="'删除根节点'"
          title="删除根节点"
          variant="outline"
          color="rgb(2,40,88)"
          @click="delTreeNode"
          data-permission="Btn_Module_DelR"
        >
          <img
            class="featuresstyle deleteBtn"
            src="@/assets/icons/delete.svg"
            alt
          />
        </CButton>
      </div>
      <div class="treeDiv">
        <ul id="moduleTree" class="ztree customStyleZtree"></ul>
      </div>
    </CCard>

    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">{{ catalogName }}列表</span>
        </div>
        <div class="header-right-wraper">
          <CButton
            color="info"
            @click="addCatalog"
            data-permission="Btn_MOdule_Add"
          >
            <CIcon name="cil-plus" />&nbsp;子模块
          </CButton>
        </div>
      </CCardHeader>
      <CCardBody>
        <div class="menu">
          <CDataTable :items="data" :fields="fields" hover border>
            <template #status="{ item }">
              <td align="center">
                <img :src="getBadge(item.status)" />
              </td>
            </template>
            <template #show_details="{ item }">
              <td class="py-2" align="center">
                <CButton
                  v-c-tooltip="'查看'"
                  title="查看"
                  variant="outline"
                  style="margin-right: 5px"
                  @click="getInfo(item)"
                >
                  <CIcon
                    class="featuresstyle colortempstyle"
                    name="cil-line-spacing"
                  />
                </CButton>
                <CButton
                  v-c-tooltip="'编辑'"
                  title="编辑"
                  variant="outline"
                  style="margin-right: 5px"
                  @click="update(item)"
                  data-permission="Btn_MOdule_Up"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/edit.svg"
                    alt
                  />
                </CButton>
                <CButton
                  v-c-tooltip="'删除'"
                  title="删除"
                  color="rgb(2,40,88)"
                  variant="outline"
                  style="margin-right: 5px"
                  @click="del(item.id)"
                  data-permission="Btn_Module_Del"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/delete.svg"
                    alt
                  />
                </CButton>
              </td>
            </template>
          </CDataTable>
        </div>
      </CCardBody>
      <CCardFooter>
        <CRow>
          <CCol class="footerPage">
            <span class="pageContent">
              每页
              <CSelect
                @change="getVendorId($event)"
                :options="[25, 5, 10, 15, 20]"
                v-model="pageSize"
                class="selectStyle"
                style
              />
              {{ this.currentPage }}页(总共{{ this.total }}页，{{
                this.allNum
              }}条记录)
            </span>
            <CPagination
              :activePage.sync="currentPage"
              :pages="total"
              align="end"
              v-if="total != 0"
            />
          </CCol>
        </CRow>
      </CCardFooter>
    </CCard>
    <!-- </CCol> -->
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除模块"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除模块</span>
      </p>
      <div class="modalBody">
        <p>删除模块时与模块相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addShow"
      draggable
      scrollable
      title="新建模块"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">新建模块</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="模块名称"
              placeholder="请输入模块名称"
              horizontal
              v-model="orgData.name"
            />
            <CInput
              label="模块编码"
              placeholder="请输入模块编码"
              horizontal
              v-model="orgData.code"
            />
            <CInput
              label="模块描述"
              placeholder="请输入模块描述"
              horizontal
              v-model="orgData.moduleDesc"
            />
            <CInput
              label="模块状态"
              placeholder="请输入模块状态（1-启用 0-禁用）"
              horizontal
              v-model="orgData.status"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info">确定</CButton>
      </template>
    </Modal>
    <Modal
      v-model="updateShow"
      draggable
      scrollable
      title="更新模块"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">更新模块</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="模块名称"
              placeholder="请输入模块名称"
              horizontal
              v-model="orgData.name"
            />
            <CInput
              label="模块编码"
              placeholder="请输入模块编码"
              horizontal
              v-model="orgData.code"
            />
            <CInput
              label="模块描述"
              placeholder="请输入模块描述"
              horizontal
              v-model="orgData.moduleDesc"
            />
            <CInput
              label="模块状态"
              placeholder="请输入模块状态（1-启用 0-禁用）"
              horizontal
              v-model="orgData.status"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info">确定</CButton>
      </template>
    </Modal>
    <Modal
      v-model="getShow"
      draggable
      scrollable
      title="查看模块"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">查看模块</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="模块名称"
              horizontal
              v-model="orgData.name"
              readonly
            />
            <CInput
              label="模块编码"
              horizontal
              v-model="orgData.code"
              readonly
            />
            <CInput
              label="模块描述"
              horizontal
              v-model="orgData.moduleDesc"
              readonly
            />
            <CInput
              label="模块状态"
              horizontal
              v-model="orgData.status"
              readonly
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="getCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="getOk" color="info">确定</CButton>
      </template>
    </Modal>
  </CRow>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:80px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "模块名称",
    key: "name",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "模块描述",
    key: "moduleDesc",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "模块状态",
    key: "status",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    key: "show_details",
    label: "操作",
    _style: "width:240px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import endIcon from "@/assets/icons/endIcon.png";
import failedIcon from "@/assets/icons/failedIcon.png";
export default {
  name: "moduleManage",
  data() {
    return {
      modalStyle: { top: "340px" },
      delShow: false,
      getShow: false,
      updateShow: false,
      addShow: false,
      loading: true,
      data: [],
      clickId: -1,
      total: 1,
      currentPage: 1,
      treeData: [],
      catalogId: 0,
      fields,
      name: "",
      catalogName: "",
      delType: 0,
      orgData: {
        applicationId: systemId,
        code: "",
        moduleDesc: "",
        name: "",
        parentId: 0,
        status: 1,
      },
      allNum: 0,
      pageSize: 15,
      pages: 0,
    };
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getCatalogList(this.catalogId);
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getCatalogList(this.catalogId);
    },
  },
  methods: {
    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
    },
    getBadge(status) {
      switch (status) {
        case 0:
          return failedIcon;
        case 1:
          return endIcon;
      }
    },
    getInfo(val) {
      this.getShow = true;
      this.clickId = val.id;
      this.orgData = val;
    },
    getCancel() {
      this.getShow = false;
    },
    getOk() {
      this.getShow = false;
    },
    update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.orgData = JSON.parse(JSON.stringify(val)); //deep copy
    },
    del(id) {
      this.delShow = true;
      this.clickId = id;
    },
    delTreeNode() {
      this.delShow = true;
      this.delType = 1;
      let treeObj = $.fn.zTree.getZTreeObj("moduleTree");
      this.clickId = treeObj.getSelectedNodes()[0].id;
    },
    addCatalog() {
      this.addShow = true;
    },
    delOk() {
      let self = this;
      let path = this.$api.manageApi.moduleDelete + "/" + this.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getCatalogTreeList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.delShow = false;
    },
    delCancel() {
      this.delShow = false;
    },
    addTreeNode() {
      this.catalogId = 0;
      this.addShow = true;
    },
    updateTreeNode() {
      let self = this;
      let treeObj = $.fn.zTree.getZTreeObj("moduleTree");
      self.catalogId = treeObj.getSelectedNodes()[0].pId;
      self.clickId = treeObj.getSelectedNodes()[0].id;

      let path = this.$api.manageApi.moduleGetById + "/" + self.clickId;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          self.orgData = res.data.data;
          this.updateShow = true;
        }
      });
    },
    addOk() {
      let self = this;
      let path = this.$api.manageApi.moduleCreate;
      self.orgData.parentId = self.catalogId;
      let param = self.orgData;
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getCatalogTreeList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.addShow = false;
      this.orgData = {
        applicationId: systemId,
        code: "",
        moduleDesc: "",
        name: "",
        parentId: 0,
        status: 1,
      };
    },
    addCancel() {
      this.addShow = false;
    },
    updateOk() {
      let self = this;
      let path = this.$api.manageApi.moduleUpdate + "/" + self.clickId;
      let param = self.orgData;
      this.http.post(path, param).then((res) => {
        this.updateShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getCatalogTreeList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.orgData = {
        applicationId: systemId,
        code: "",
        moduleDesc: "",
        name: "",
        parentId: 0,
        status: 1,
      };
    },
    updateCancel() {
      this.updateShow = false;
    },
    getCatalogTreeList() {
      let self = this;
      self.treeData = [];
      let applicationId = systemId;
      let path = this.$api.manageApi.getBySystemId + "/" + applicationId;

      this.http.get(path).then((res) => {
        self.loading = false;
        if (res.data.success) {
          self.treeData = res.data.data;

          let setting = {
            data: {
              simpleData: {
                enable: true,
              },
            },
            view: {
              showLine: false,
              showIcon: false,
            },
            callback: {
              onClick: this.zTreeOnClick,
            },
          };

          $.fn.zTree.init($("#moduleTree"), setting, self.treeData);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    zTreeOnClick(event, treeId, treeNode) {
      let self = this;
      self.catalogId = treeNode.id;
      self.catalogName = treeNode.name;
      self.showList = true;
      this.getCatalogList(self.catalogId);
    },
    getCatalogList(parentId) {
      let self = this;
      self.data = [];
      let path = this.$api.manageApi.getByParentId + "/" + parentId;
      let param = {
        pageNum: self.currentPage,
        pageSize: self.pageSize,
      };
      this.http.get(path).then((res) => {
        if (res.data.code == 0) {
          self.allNum = res.data.data.total;
          self.data = res.data.data.dataList;
          self.total = Math.ceil(res.data.data.total / self.pageSize);
          for (let i = 0; i < self.data.length; i++) {
            self.data[i].number =
              (self.currentPage - 1) * self.pageSize + i + 1;
          }
          console.log(JSON.stringify(self.data));
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
  },

  mounted() {
    this.getCatalogTreeList();
  },
};
</script>
<style scoped>
.col-md-2 {
  padding-left: 20px;
  padding-right: 10px;
}
.col-md-10 {
  padding-left: 0px;
  padding-right: 20px;
}
.menuBtn {
  margin-top: 10px;
  border-bottom: 1px solid #c4c9d0;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.ivu-tree {
  /* border: 1px solid #c4c9d0; */
  border-radius: 3px;
  /* max-height: 780px; */
  height: 100%;
  overflow: auto;
  /* overflow-y: scroll; */
  /* margin-left: 10px; */
  width: 94%;
  margin-left: 7px;
}
::-webkit-scrollbar {
  /* width: 3px;
  height: 3px; */
  background-color: #d8d8d8;
}
::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}
@media screen and (min-width: 1367px) {
  .card {
    height: 89vh;
  }
}

/* 删除提示界面修改 */
.delKuangShow {
  line-height: 30px;
  margin-left: 10px;
  font-size: 16px;
}
.modalBody {
  margin-left: 39px;
  line-height: 3;
}

.leftTree .btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  /* margin-right: 10px; */
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.leftCard {
  width: 18%;
  position: absolute;
  left: 10px;
}
.rightCard {
  width: 80%;
  position: absolute;
  right: 9px;
}
.addTongji {
  margin-left: 10px;
}
.deleteBtn {
  margin-right: 10px;
}
.btn:hover {
  color: #d8d8d8;
}
.cardHeader {
  padding: 10px 20px;
}
.userTitle {
  margin-bottom: 0 !important;
  margin-top: 5px;
}
/* .right-card {
  margin-right: -24px;
} */
.card {
  height: 87vh;
}

@media screen and (min-width: 1367px) {
  .card {
    height: 87vh;
  }
}
@media screen and (min-width: 1920px) {
  .card {
    height: 91vh;
  }
}
</style>
